<template>
  <div class="app-container pagePublic">
    <!--label-position:label对齐方式,inline行内表单-->
    <el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
      <el-form-item label="公司名称">
        <el-input v-model="searchForm.company" placeholder="请输入公司名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="success" icon="el-icon-edit" @click="addFrom">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        :height="tableHeight"
      >
        <el-table-column label="序号" align="center" width="80" type="index"/>
        <el-table-column label="公司名称" align="name" property="name" show-overflow-tooltip/>
        <el-table-column label="公司联系方式" align="center" property="linkType" show-overflow-tooltip/>

        <el-table-column label="负责人" align="center" property="manager" show-overflow-tooltip/>
        <el-table-column label="负责人联系方式" align="center" property="phone" show-overflow-tooltip/>
        <!--   <el-table-column label="完工日期" align="center" property="endTime" show-overflow-tooltip />-->
        <el-table-column label="订单数量" align="center" property="ctime" show-overflow-tooltip/>
        <el-table-column label="注册时间" align="center" property="ctime" show-overflow-tooltip/>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
            <el-button size="mini" type="success" @click="chakan(row)">订单</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList"/>

    <!--新增/编辑-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelForm"
      class="dialogPublic"
    >
      <el-form ref="dialogForm" :rules="rulesForm" :model="dialogForm" class="formPublic" style="display: flex">
        <div style="width:100%;display: inline-block;">
          <el-form-item prop="name" label-width="150px" label="公司名称:">
            <el-input
              v-model="dialogForm.name"
              class="dialoginput"
              placeholder="请输入公司名称"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="address" label-width="150px" label="公司地址:">
            <el-input
              v-model="dialogForm.address"
              class="dialoginput"
              placeholder="请输入公司地址"
              auto-complete="off"
            />
          </el-form-item>
         <!--<el-form-item prop="e_main" label-width="150px" label="邮箱地址:">
            <el-input
              v-model="dialogForm.e_main"
              class="dialoginput"
              placeholder="请输入邮箱地址"
              auto-complete="off"
            />-->
          </el-form-item>
          <el-form-item prop="linkType" label-width="150px" label="公司联系方式:">
            <el-input
              v-model="dialogForm.linkType"
              class="dialoginput"
              placeholder="请输入公司联系方式"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="manager" label-width="150px" label="负责人:">
            <el-input
              v-model="dialogForm.manager"
              class="dialoginput"
              placeholder="请输入负责人"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="phone" label-width="150px" label="负责人联系方式:">
            <el-input
              v-model="dialogForm.phone"
              class="dialoginput"
              placeholder="请输入负责人联系方式"
              auto-complete="off"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="dialogStatus=='add'?addData():updateData()">保存</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </div>
    </el-dialog>
    <!--订单信息-->

    <el-dialog
      title="订单信息"
      :visible.sync="chakanVisible"
      width="70%">
      <div>
        <h4>进行中订单</h4>
        <ul class="dingdanul" v-if="going">
          <li v-for="item in goingdata">
            <!--<div v-if="scope.row.iocn ==''||scope.row.iocn ==null">-->
            <!--<img-->
            <!--src="./img/noData.jpg"-->
            <!--style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"-->
            <!--&gt;-->
            <!--</div>-->
            <!--<img v-if="item.iocn ==''||item.iocn ==null" src="@/static/img/noData.jpg" alt="">-->
            <!--<img v-else :src="$store.state.apiUrl+'file/'+item.iocn.split(',')[0]"-->
                 <!--alt="">-->
            <img src="@/static/img/paidan.png" alt="">
            <h5>{{item.orderName}}</h5>
            <p v-if="item.dayOut-0>0||item.dayOut-0==0">
              已施工<span style="color: greenyellow">{{item.dayOperation}}</span>天/剩余<span style="color: greenyellow">{{item.dayOut}}</span>天
            </p>
            <p v-else>
              已施工<span style="color: red">{{item.dayOperation}}</span>天/超期<span style="color: red">{{-item.dayOut}}</span>天
            </p>
            <p>
              {{item.commission}}元
            </p>
            <p>{{item.orderAddress}}</p>
          </li>
        </ul>
        <div class="nodata" v-else>
          暂无数据
        </div>
        <div class="divide">
        </div>
        <h4>已完成订单</h4>
        <ul class="dingdanul" v-if="over" style="height:185px;overflow: auto ">
          <li v-for="item in overdata">
            <!--<div v-if="scope.row.iocn ==''||scope.row.iocn ==null">-->
            <!--<img-->
            <!--src="./img/noData.jpg"-->
            <!--style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"-->
            <!--&gt;-->
            <!--</div>-->
            <!--<img v-if="item.iocn ==''||item.iocn ==null" src="@/static/img/noData.jpg" alt="">-->
            <!--<img v-else :src="$store.state.apiUrl+'file/'+item.iocn.split(',')[0]"-->
                 <!--alt="">-->
            <img src="@/static/img/paidan.png" alt="">
            <h5>{{item.orderName}}</h5>
            <!--<p v-if="item.dayOut-0>0||item.dayOut-0==0">-->
              <!--已施工<span style="color: greenyellow">{{item.dayOperation}}</span>天/剩余<span style="color: greenyellow">{{item.dayOut}}</span>天-->
            <!--</p>-->
            <!--<p v-else>-->
              <!--已施工<span style="color: red">{{item.dayOperation}}</span>天/超期<span style="color: red">{{-item.dayOut}}</span>天-->
            <!--</p>-->
            <p>
              {{item.commission}}元
            </p>
            <p>{{item.orderAddress}}</p>
          </li>
        </ul>
        <div class="nodata" v-else>
          暂无数据
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import {
    orderClientData,
    orderClerkData,
    orderList,
    uploadFile,
    orderAdd,
    orderRowList,
    orderUpdate,
    orderRelease,
    orderDelete,
    kehuList,
    kehuadd,
    kehuupdate,
    kehuSelectOne,
    kehuDelect
  } from '@/api/article'
  /* import waves from '@/directive/waves' // waves directive*/
  /* import { parseTime } from '@/utils'*/
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'CustomerManagement',
    components: {Pagination},
    /*  directives: { waves },*/
    data() {
      return {
        going: false,
        goingdata: [],
        over: false,
        overdata: [],
        chakanVisible:false,
        /** **********数组***********/
        orderClientData: [], // 所属客户数组
        orderClerkData: [], // 接单人员数组
        /** **********数组结束***********/
        labelPosition: 'right', // el-form的label对齐方式
        /** **********查询**********/
        searchForm: {
          company: ""
        },
        /** **********查询结束**********/
        /** **********table**********/
        tableList: [], // 页面table数据
        listLoading: true, // 加载
        tableHeight: window.screen.availHeight - 380, // table高度
        tableKey: 0,
        isDisabled: false,
        /** **********table结束**********/
        /** **********分页**********/
        total: 0,
        page: 1,
        limit: 10,
        /** **********分页结束**********/
        /** **********新增**********/
        startTimeOptions: {
          // 开始时间限制
          disabledDate: function (date) {
            return date > new Date(this.dialogForm.endDate)
          }.bind(this)
        },
        endTimeOptions: {
          // 结束时间限制
          disabledDate: function (date) {
            return date < new Date(this.dialogForm.startDate)
          }.bind(this)
        },
        dialogVisibleImg: false,
        dialogImageUrl: '',
        dialogTitle: '新增',
        dialogFormVisible: false,
        dialogStatus: 'add',
        dialogForm: {
          id: "",
          name: "",
          address: "",
          e_main: "",
          linkType: "",
          manager: "",
          phone: ""
        },
        fileListData: [],// 附件数组(用于展示在前端)
        rulesForm: {
          name: [
            {required: true, message: '请输入公司名称', trigger: 'blur'}
          ],
          e_main:[
            {validator:this.validEmail, trigger: 'blur'}
          ],
          linkType:[
            {validator:this.validPhone, trigger: 'blur'}
          ],
          phone:[
            {validator:this.validPhone, trigger: 'blur'}
          ]
        },
        /** **********新增结束**********/
      }
    },
    created() {

    },
    mounted() {
      this.getList();
      this.initArray();
    },
    methods: {
      /** **************接单员+所属客户***************/
      initArray() {
        this.orderClientData = [] // 所属客户数组
        this.orderClerkData = [] // 接单人员数组
        orderClientData({}).then(res => {
          console.log('jie4dan', res)
          if (res.code == 1) {
            this.orderClientData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        orderClerkData({}).then(res => {
          if (res.code == 1) {
            this.orderClerkData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      /** **************接单员+所属客户结束***************/
      /** **************查询***************/
      getList() {
        this.listLoading = true
        kehuList({
          name:this.searchForm.company,
          pageNum: this.page,
          pageSize: this.limit
        }).then(res => {
          if (res.code == 1) {
            this.tableList = res.data.list
            this.total = res.data.total
            this.listLoading = false
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      /** **************查询结束***************/

      /** **************重置***************/
      reset() {
        this.searchForm = {
          orderName: '', // 订单名称
          time: [], // 时间
          personName: ''// 接单员
        }
        this.page=1;
        this.limit=10;
        this.getList()
      },
      /** **************重置结束***************/

      /** **************新增***************/
      //上传图片
      handleAvatarSuccess(file) {
        this.dialogForm.orderPhoto = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file, dialogStatus) {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("上传图片只能是JPG格式或者PNG格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
          return;
        }
        if (file) {
          let fileData = new FormData()
          fileData.append('file', file)
          uploadFile(fileData).then(res => {
            if (res.code == 1) {
              const fileImg = res.data.url
              this.dialogForm.orderPhoto.push(fileImg)
            } else {
              this.$message({
                type: 'error',
                message: '图片上传失败'
              })
            }
          })
        }
        return false
      },
      //删除图片
      resertImg(index) {
        this.dialogForm.orderPhoto.splice(index, 1)
      },
      // 上传前
      beforeExcelUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 500
        if (!isLt5M) {
          this.$message.warning('上传模板大小不能超过500M！')
          return
        }
        if (file) {
          let fileArray = null
          let fileData = new FormData()
          fileData.append('file', file)
          uploadFile(fileData).then(res => {
            if (res.code == 1) {
              const fileUrl = res.data.url
              fileArray = {
                name: file.name,
                url: fileUrl,
                time: formatDate(new Date())
              }
              this.dialogForm.fileList.push(fileArray)
            } else {
              this.$message({
                type: 'error',
                message: '附件上传失败'
              })
            }
          })
        }
        return false
      },
      //删除文件
      excelRemove(file) {
        for (let i = 0; i < this.dialogForm.fileList.length; i++) {
          if (file.uid == this.dialogForm.fileList[i].uid) {
            this.dialogForm.fileList.splice(i, 1)
          }
        }
        console.log('delete', this.dialogForm.fileList)
      },
      // 弹出dialog
      addFrom() {
        this.dialogStatus = 'add'
        this.dialogTitle = '新增'
        this.dialogFormVisible = true
        this.dialogForm = {
          id: "",
          name: "",
          address: "",
          e_main: "",
          linkType: "",
          manager: "",
          phone: ""
        }
      },
      // 保存
      addData() {
        this.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            kehuadd({
              name: this.dialogForm.name,
              address: this.dialogForm.address,
              email: this.dialogForm.e_main,
              linkType: this.dialogForm.linkType,
              manager: this.dialogForm.manager,
              phone: this.dialogForm.phone
            }).then(res => {
              if (res.code == 1) {
                this.cancelForm();
                this.reset();
                setTimeout(() => {
                  this.$message({
                    type: 'success',
                    message: '新增成功'
                  })
                }, 500)
              }
            })
          }
        })
      },
      // 关闭dialog
      cancelForm() {
        this.dialogFormVisible = false
        this.$refs.dialogForm.resetFields()
        this.$refs.dialogForm.clearValidate()
      },
      // 保存dialog
      /** **************新增结束***************/

      /** **************编辑***************/
      handleUpdate(row) {
        this.dialogStatus = 'update'
        this.dialogTitle = '修改'
        this.dialogFormVisible = true
        this.dialogForm = {
          id: row.id,
          name: row.name,
          address: row.address,
          e_main: row.email,
          linkType: row.linkType,
          manager: row.manager,
          phone: row.phone
        }

      },
      updateData() {
        this.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            kehuupdate({
              id: this.dialogForm.id,
              name: this.dialogForm.name,
              address: this.dialogForm.address,
              email: this.dialogForm.e_main,
              linkType: this.dialogForm.linkType,
              manager: this.dialogForm.manager,
              phone: this.dialogForm.phone
            }).then(res => {
              if (res.code == 1) {
                this.cancelForm();
                this.getList();
                setTimeout(() => {
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                }, 500)
              }
            })
          }
        })
      },
      /** **************编辑结束***************/
      /** **************查看***************/
      chakan(row) {
        this.chakanVisible = true
        orderList({
          status: 4,//施工中订单
          companyId: row.id,//订单名称
        }).then(res => {
          if (res.code == 1) {
            this.goingdata = res.data.list
            if (res.data.list.length > 0) {
              this.going = true
            }else {
              this.going = false
            }
          }
        })
        orderList({
          status: 6,//施工中订单
          companyId: row.id,//订单名称
        }).then(res => {
          if (res.code == 1) {
            this.overdata = res.data.list
            if (res.data.list.length > 0) {
              this.over = true
            }else {
              this.over = false
            }
          }
        })
      },

      /** **************发布***************/
      handleRelease(row) {
        this.$confirm('是否确认发布' + row.orderName + '？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderRelease({
            id: row.id,
            status: 2
          }).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '发布成功'
              })
              this.reset()
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
        })
      },
      /** **************发布结束***************/

      /** **************删除***************/
      handleDelete(row) {
        this.$confirm('是否确认删除客户“' + row.name + '”？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          kehuDelect(row.id).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.reset()
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
        })
      },
      /** **************删除结束***************/
      /** **************校验***************/
      validPhone(rule, value, callback) {
        var re = /^1[0-9]{10}$/;
        if (value && !re.test(value)) {
          callback(new Error('请输入正确格式的手机号'));
        } else {
          callback();
        }
      },
      validEmail(rule, value, callback) {
        var re = /^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/;
        if (value && !re.test(value)) {
          callback(new Error('请输入正确格式的邮箱'));
        } else {
          callback();
        }
      },
    }
  }
</script>
<style scoped lang="scss">
  .imagehua {
    position: relative;
    width: 120px;
    height: 120px;
    float: left;

    &:hover .imghua {
      display: block;
    }

    img {
      width: 100% !important;
      height: 100% !important;
    }

    .imghua {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      top: 0;
      display: none;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .imagehuaican {
    float: left;
    width: 120px;
    height: 120px;
    position: relative;

    &::before {
      position: absolute;
      left: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .dingdanul{
    display: flex;
    flex-wrap: wrap;
    li{
      margin-top: 10px;
      padding: 0 5px;
      width: 24%;
      height: 85px;
      border-right: 1px solid #eee;
      img{
        width: 70px;
        height: 80px;
        float: left;
        margin-right:10px ;
      }
      h5{

      }
      p{
        margin-top: 10px;
        font-size:6px;
        color:rgba(51,51,51,1);
      }
    }
  }
  .nodata{
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 70px;
  }
  .divide{
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 40px 10px 10px;
  }
</style>

